<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref, Ref} from 'vue';
import {useECharts} from "@/hooks/web/useECharts";

const chartRef = ref<HTMLDivElement>();
const {setOptions} = useECharts(chartRef as Ref<HTMLDivElement>);
const height = ref('280px');
const width = ref('100%');

const props = defineProps({
  valueFetch: {
    type: Function,
    default: () => {
      return '';
    },
  },
  anChartField: {
    type: Object,
  },
});

const value = ref( [10, 22, 28, 23, 19]);
const columnNames = ref([]);
const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        width: 1,
        color: '#019680',
      },
    },
  },
  xAxis: {
    data: columnNames,

  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: value,
      type: 'bar',
    }
  ]
})
function init() {
  props.valueFetch().then(
    res => {
      columnNames.value = res.value
        .map((item: any) => {
          return item.item || item.ITEM
        });
      value.value = res.value
        .map((item: any) => {
          return item.itemCount || item.ITEMCOUNT || item.itemcount
        });
      setOptions(option);
    }
  );
}

onMounted(() => {
  init();
});

onUpdated(() => {
  init();
});
</script>
